<template>
  <div class="scroll-input-container">
    <span :class="maskClass" v-show="!focused" @click="setFocus(true)">{{innerValue || placeholder}}</span>
    <input ref="scrollInput" autofocus="autofocus" :class="inputClass" v-model="innerValue" v-show="focused" :placeholder="placeholder" @blur="setFocus(false)" />
  </div>
</template>
<script>
  export default {
    name: 'ScrollInput',
    props: {
      value: {
        type: Object,
        default: null
      },
      field: {
        type: String,
        default: ''
      },
      placeholder: {
        type: String,
        default: '请输入...'
      },
      maskClass: {
        type: String,
        default: 'placeholder'
      },
      inputClass: {
        type: String,
        default: 'scroll-input'
      }
    },
    data() {
      return {
        focused: false,
        innerValue: null
      }
    },
    methods: {
      setFocus(focus) {
        this.focused = focus
        if (focus) {
          Function.delayCall('scrollInput_focus', 300, () => {
            this.$refs.scrollInput.focus()
          }, this)
        }
      }
    },
    watch: {
      innerValue(val) {
        this.$emit('input', val)
      },
      value(val) {
        this.innerValue = val || this.placeholder
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '../../assets/sass/_vars';

  .scroll-input-container {
    display: flex;
    flex-flow: column;
  }

  .placeholder {
    height: 100%;
    display: flex;
    align-items: center;
    color: $text-gray;
  }

</style>
<style lang="scss">
  @import '../../assets/sass/_vars';

  .scroll-input-container .placeholder, .scroll-input-container .scroll-input {
    width: 100%;
    flex-grow: 1;
    border: solid 1px $text-gray;
    padding-left: 10px;
  }
</style>
